<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>警告框插件</title>
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body style="margin: 100px;">
<!-- 
	1.基本
		1)	.alert
		2)	.alert-warning
	
	2.关闭按钮设置
		1)	.close
		2)	data-dismiss="alert"

		JS方法：(即不要data-dismiss="alert")
			$('.close').click(function () {
				$('div').alert('close')
			})

	3.淡入淡出效果
		1)	.fade
		2)	.in

	4.事件类型（回调函数）
		1)	$('div').on('close.bs.alert',函数) 				//还有closed


 -->

	<div class="alert alert-warning fade in">
		<button class="close" data-dismiss="alert">&times;</button> 		<!-- 这句话不应该在警告语下面 -->
		<p>警告：您的浏览器不支持！</p>
	</div>


	<script src="bootstrap-3.3.5-dist/jquery/jquery.min.js"></script>
	<script src="bootstrap-3.3.5-dist/bootstrap/bootstrap.min.js"></script>
	<script>
		// JS方法：关闭
		/*$('.close').click(function () {
			$('div').alert('close')
		})*/

		// 事件类型（回调函数）
		$('div').on('closed.bs.alert', function () {
			alert('关闭之后触发')
		})
	</script>
</body>
</html>